<template>
  <view class="container">
    <view class="header">
      <text class="title">中级加法练习</text>
      <view class="header-controls">
        <button class="icon-button" @click="toggleSettings">
        </button>
        <text class="timer">{{ formattedTime }}</text>
      </view>
    </view>

    <view class="content">
      <scroll-view scroll-y class="question-list">
        <view v-for="(q, index) in questions" :key="index" class="question-item">
          <text class="question-text" :style="{ fontSize: fontSize + 'px' }">
            {{ q.expression }} =
          </text>
          <input
              type="number"
              v-model.number="q.userAnswer"
              class="answer-input"
              :disabled="q.isCorrect !== null"
              :style="{ fontSize: fontSize + 'px' }"
          />
          <view class="feedback-indicator">
            <text v-if="q.isCorrect === true" class="correct">✓</text>
            <text v-if="q.isCorrect === false" class="incorrect">✗</text>
          </view>
        </view>
      </scroll-view>

      <view class="action-bar">
        <button class="primary-btn" @click="checkAnswers" :disabled="isChecking">
          {{ isChecking ? '批改中...' : '提交答案' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
const generateQuestion = () => {
  const a = Math.floor(Math.random() * 30)
  const b = Math.floor(Math.random() * (20 - a))
  return {
    expression: `${a} + ${b}`,
    correctAnswer: a + b,
    userAnswer: null,
    isCorrect: null
  }
}

export default {
  data() {
    return {
      questions: [],
      questionCount: 5,
      showSettings: false,
      startTime: Date.now(),
      currentTime: Date.now(),
      isChecking: false
    }
  },
  computed: {
    formattedTime() {
      const seconds = Math.floor((this.currentTime - this.startTime) / 1000)
      return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
    }
  },
  created() {
    this.initializeQuestions()
    this.timer = setInterval(() => {
      this.currentTime = Date.now()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    initializeQuestions() {
      this.questions = Array.from({length: this.questionCount}, generateQuestion)
    },
    toggleSettings() {
      this.showSettings = !this.showSettings
    },
    async checkAnswers() {
      this.isChecking = true

      // 模拟异步批改过程
      await new Promise(resolve => setTimeout(resolve, 500))

      this.questions.forEach(q => {
        q.isCorrect = q.userAnswer === q.correctAnswer
      })

      const correctCount = this.questions.filter(q => q.isCorrect).length

      // 计算已用时间
      const elapsedTime = Math.floor((this.currentTime - this.startTime) / 1000)
      const minutes = Math.floor(elapsedTime / 60)
      const seconds = elapsedTime % 60
      const content = `正确: ${correctCount}题\n错误: ${this.questionCount - correctCount}题`

      uni.showModal({
        title: `已用时间: ${minutes}分${seconds}秒`,
        content: content,
        confirmText: '重新练习',
        cancelText: '查看',
        success: (res) => {
          if (res.confirm) {
            this.initializeQuestions()
            this.startTime = Date.now()
          }
        }
      })

      this.isChecking = false
    }
  }
}
</script>
<style>
.container {
  flex: 1;
  background: #f8f9fa;
}

.header {
  padding: 24rpx;
  background: #4A90E2;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.header-controls {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.title {
  color: white;
  font-size: 40rpx;
  text-align: center;
  position: fixed;
  overflow-y: auto;
  font-weight: 400;
}


.icon-button {
  padding: 12rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.icon {
  width: 40rpx;
  height: 40rpx;
}

.content {
  flex: 1;
  padding: 24rpx;
}

.question-list {
  max-height: 80vh;
  margin-bottom: 24rpx;
}

.question-item {
  flex-direction: row;
  align-items: center;
  padding: 16rpx;
  margin: 16rpx 0;
  background: white;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.question-text {
  flex: 1;
  margin-right: 24rpx;
  color: #333;
}

.answer-input {
  width: 140rpx;
  padding: 16rpx;
  border: 2rpx solid #e9ecef;
  border-radius: 8rpx;
  text-align: center;
  display: flex;
}

.feedback-indicator {
  width: 60rpx;
  text-align: center;
}

.correct {
  color: #52c41a;
  font-weight: bold;
}

.incorrect {
  color: #f5222d;
  font-weight: bold;
}

.action-bar {
  padding: 24rpx 0;
}

.primary-btn {
  background: #4A90E2;
  color: white;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  font-size: 32rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

</style>